<template>
    <div>
        <div id="mp-top">
            <div style="position: absolute;bottom: 10%;margin-left: 40px;">
            <el-button type="primary"  @click="re()" >返回首页</el-button>
            </div>
            <img src="../assets/imgs/logo.png" style="position: absolute;left: 20%;width: 237px;height: 77px;">
            <div style="position: absolute;right: 10%;bottom: 10%;">
                <img :src= circleUrl class="avatar">
                <span style="font-size: 22px;">
                {{this.name}}
                </span>
            </div>
        </div>
        <div id="mp-under">
            <div class="main-contain">
                <div class="contain1" > 
                   <div style="display: flex;flex-flow: column;height:700px;margin-top: 40px;">
                    <div style="flex: 1;">
                    <img src="../assets/imgs/person.svg" style="width: 44px;height: 44px;" />
                    <el-link type="primary" style="color: white; font-size: 24px;margin-left: 10px;" @click="change1()">个人资料</el-link>
                    </div>
                    <div style="flex: 1;">
                    <img src="../assets/imgs/comment.svg" style="width: 44px;height: 44px;"/>
                    <el-link type="primary" style="color: white; font-size: 24px;margin-left: 10px;" @click="change2()">我的评论</el-link>
                    </div>
                    <div style="flex: 1;">
                    <img src="../assets/imgs/like.svg" style="width: 44px;height: 44px;"/>
                    <el-link type="primary" style="color: white; font-size: 24px;margin-left: 10px;" @click="change3()">我的点赞</el-link>
                    </div>
                    <div style="flex: 1;">
                    <img src="../assets/imgs/star.svg" style="width: 44px;height: 44px;"/>
                    <el-link type="primary" style="color: white; font-size: 24px;margin-left: 10px;" @click="change4()">我的关注</el-link>
                    </div>
                    <div style="flex: 1;">
                    <img src="../assets/imgs/1.svg" style="width: 44px;height: 44px;"/>
                    <el-link type="primary" style="color: white; font-size: 24px;margin-left: 10px;" @click="change5()">我的收藏</el-link>
                    </div>
                </div>
                </div>
                   
                <div style="flex: 8;display: flex; margin-left: 40px;">
                <div class="contain2" v-show="this.flag1">
                      <div class="info">
                         <el-avatar :src=circleUrl style="height: 100px;width:100px;position: absolute;margin-left: -40px;top: 12%;"/>
                     <div style="margin-top: 50px;margin-left: 18px;position: absolute;">
            
                        <ul  class="nav pull-right" style="font-size: 18px;width: 280px;text-align: left;background-color: #dee9f4;margin-left: 40px;margin-top: 20px;">
                        <li>
                         
                            <span v-if="this.info.telnumber!= 0" style="font-size: 18px;width: auto;"> 绑定手机:{{ this.info.telnumber }}</span>
                            <a v-else>
                                绑定手机:暂未填写</a>
                        </li><br>
                        <li><span v-if="this.info.email"  style="font-size: 18px;">邮箱:{{ this.info.email }}</span>
                            <a v-else>邮箱:暂未填写</a></li> <br>
                        <li><span v-if="this.info.brith "  style="font-size: 18px;">生日:{{ this.info.brith }}</span>
                            <a v-else>生日:暂未填写</a></li><br>
                        <li><span v-if="this.info.sex"  style="font-size: 18px;">性别:{{ this.info.sex }}</span>
                            <a v-else>性别:暂未填写</a></li><br>
                        <li>个人介绍:
                            <br>
                            <span v-if="this.info.introduce "  style="font-size: 18px;margin-top: 15px;">{{ this.info.introduce }}</span>
                            <a v-else>暂未填写</a></li><br>
                    
                        <br></ul>
                        <br>
                        <el-button type="primary" @click="dialogFormVisible = true" style="margin-top: 200px;">双击修改信息</el-button>
                        <el-dialog title="编辑个人信息" :visible.sync="dialogFormVisible" width="400px">
                
                        <el-form :label-position="labelPosition" label-width="80px" :model="info1">
                            <el-form-item label="性别">
                                <el-input v-model="info1.sex"></el-input>
                            </el-form-item>
                            <el-form-item label="电话号码">
                                <el-input v-model="info1.telnumber"></el-input>
                            </el-form-item>
                            <el-form-item label="邮箱">
                                <el-input v-model="info1.email"></el-input>
                            </el-form-item>
                            <el-form-item label="生日">
                                <el-input v-model="info1.brith"></el-input>
                            </el-form-item>
                            <el-form-item label="自我介绍">
                                <el-input v-model="info1.introduce"></el-input>
                            </el-form-item>
                            </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible = false">取 消</el-button>
                            <el-button type="primary" @click="dialogFormVisible = false,setinfo()">确 定</el-button>
                        </div>
                        </el-dialog>
                      
                    </div>
                    </div>
                </div>
                <div class="contain3" v-show="this.flag1" style="display: flex;flex-flow: column">
                    <div style="flex:5;border-radius: 15px;margin-bottom: 40px;margin-top: 10px;margin-right: 10px;">
                        <h2 style="color: rgb(28, 173, 213);left: 50%;position: absolute;font-size: 25px;top:5%">系统消息</h2>
                        <br>
                        <br>
                        <h4 style="margin-top: 50px;">暂无信息</h4>
                    </div>
                    <div style="flex: 2;display: flex;background-color: rgb(249, 249, 247);margin-bottom: 10px;margin-right: 10px;">
                        <div style="flex: 1;border-radius: 15px;">
                            <p style="color: rgb(28, 173, 213);left: 5%;position: relative;margin: 20px;text-align: left;font-size: 21px;">认证信息</p>
                            <div v-if="user_id=1" style="margin-left: -130px;">身份：读者</div>
                        </div>
                        <div style="flex: 1;border-radius: 15px;">
                            <p style="color: rgb(28, 173, 213);left: 75%;position: absolute;text-align: left;font-size: 21px;margin: 20px;">相关信息</p>
                           <div style="text-align: center;margin-top: 50px;margin-left: -20px;">暂无</div> 
                        </div>
                    </div>
                </div>
                <div v-show="this.flag2" class="tranferbox">
                    <h2 style="color: rgb(28, 173, 213);left: 15%;position: absolute;margin-bottom: 0;">我的评论</h2>
                    <div style="display: flex;height: 700px;margin-top:70px ;flex-direction: column;" v-if="this.List1.length!=0">
                    <div style="background-color: rgb(220, 229, 240);flex: 1;border-radius: 15px;width: auto;" >
                        <li  v-for="item in List1" :key="item" class="li-item" >
                    <div style="display: flex;width: 750px;">
                        <div style="flex:2">
                            <el-avatar :src=circleUrl style="width: 50px;height: 50px;"/>
                        </div>
                        <div style="flex:7;text-align: left;">
                             {{ item.comment_content}} 
                             <br>
                             <div style="text-align: right;">
                             {{ item.comment_time.split("T")[0] }}
                             {{ item.comment_time.split("T")[1].split(".")[0] }}
                            </div>
            
                            留言于：{{item.new_title}}
                             <br>
                            
                        </div>
                        <div style="flex:5;">
                            <img :src=item.picture_src style="width: 210px;height: 110px; object-fit: cover;"/>
                        </div>
                    </div>
                    </li>
                    </div>
                    <h2 style="color: rgb(87, 191, 220);left: 15%;position: absolute;margin-top: 28%;">他人回复</h2>
                    <div style="flex: 1;margin-top: 70px;">
                        <li  v-for="item in List2" :key="item" class="li-item">
                            <div style="display: flex;width: 650px;">
                        <div style="flex:1">
                            <el-avatar :src="item.avtar" style="width: 50px;height: 50px;"/>
                        </div>
                        <div style="flex:5;text-align: left;margin-left: 15px;">
                             {{ item.comment1 }}
                             <br>
                             <br>
                             <div style="text-align: right;">
                             {{ item.comment_time.split("T")[0] }}
                             {{ item.comment_time.split("T")[1].split(".")[0] }}
                            </div>
                             回复我的评论：<br>{{ item.comment_content}}
                             
                        </div>
                        <div style="flex:5;">
                            <img :src=item.picture_src style="width: 210px;height: 110px; object-fit: cover;"/>
                        </div>
                        </div>
                        </li>
                    </div>
                    
                    
                    </div>
                    <div v-else> <p style="margin-top: 25%;">暂无数据</p></div>
                </div>

                <div v-show="this.flag3" class="tranferbox"> 
                    <h2 style="color: rgb(28, 173, 213);left: 15%;position: absolute;">我的点赞</h2>
                    <div style="display: flex;margin-top: 80px;flex-wrap: wrap;
                        justify-content: flex-start;background-color: #e7eef5;" v-if="this.List.length!=0">
                    <li  v-for="item in List" :key="item" class="li-item" @click="getdetail(item.new_id)">
                    <div style="display: flex;">
                        <div style="flex:1">
                            <img :src=item.picture_src style="width: 210px;height: 110px; object-fit: cover;"/>
                        </div>
                        <div style="flex:1">
                             {{ item.new_title}}
                             <br>
                             <br>
                             <br>
                             {{ item.new_time.split("T")[0] }}
                             {{ item.new_time.split("T")[1].split(".")[0] }}
                        </div>
                    </div>
                    </li>
                    </div>
                    <div v-else> <p style="margin-top: 25%;">暂无数据</p></div>
                </div>

                <div v-show="this.flag4" class="tranferbox"> 
                    <h2 style="color: rgb(28, 173, 213);left: 15%;position: absolute;">我的关注</h2>
                    <div style="display: flex;margin-top: 80px;flex-wrap: wrap;
                        justify-content: flex-start;background-color: #e7eef5;" v-if="this.List3.length!=0">
                        <li  v-for="item in List3" :key="item" class="li-item1">
                     <div style="display: flex;">
                        <div style="flex:1">
                            <el-avatar v-if="item.avtar!=null" :src="item.avtar" style="width: 100px;height: 100px; object-fit: cover;"/>

                            <img v-else src="../assets/default.png" style="width: 100px;height: 100px; object-fit: cover;" alt="car"/>
                        </div>
                        <div style="flex:1">
                            <div style="float: left;margin-bottom: 40px;">
                             {{ item.username}}          
                             <el-button type="primary" size="mini" style="margin-left: 5px;" @click="changefocus(item.newspublisher_id)">已关注</el-button>
                           </div>
                            <div style="float: left;">个人介绍</div>
                            <div style="float: left;" v-if="item.introduce">{{ item.introduce }}</div>
                            <div style="float: left;" v-else>这个人很高冷，没有留下个人介绍哦</div>
                           
                        </div>
                        </div>
                        </li>
                    </div>
                    <div v-else> <p style="margin-top: 25%;">暂无数据</p></div>
                </div>
                
                <div v-show="this.flag5" class="tranferbox"> 
             <h2 style="color: rgb(28, 173, 213);left: 15%;position: absolute;">我的收藏</h2>
                        <div style="display: flex;margin-top: 80px;flex-wrap: wrap;
                            justify-content: flex-start;background-color: #e7eef5;" v-if="this.List.length!=0">
                                <li  v-for="item in List" :key="item" class="li-item" @click="getdetail(item.new_id)">
                                <div style="display: flex;">
                                    <div style="flex:1">
                                        <img :src="item.picture_src" style="width: 210px;height: 110px; object-fit: cover;"/>
                                    </div>
                                    <div style="flex:1">
                                        {{ item.new_title}}
                                        <br>
                                        <br>
                                        <br>
                                        {{item.new_time.split(" ")[0] }}
                                    </div>
                                </div>
                                </li>
                        </div>
                   
                    <div v-else> <p style="margin-top: 25%;">暂无数据</p></div>
                </div>

                </div>
           
            </div>
        </div>
    </div>
</template>
<script>
export default{
    data(){
        return{
          
            name:localStorage.getItem("userName"),
            user_id:this.$store.getters.getuserId,
            tabPosition:'left',
            flag1:true,
            flag2:false,
            flag3:false,
            flag4:false,
            flag5:false,
            t:true,
            f:false,
            List:[],
            List1:[],
            List2:[],
            List3:[],
            dialogFormVisible: false,

        circleUrl:localStorage.getItem("avtar"),
        labelPosition: 'right',
        formLabelAlign: {
          name: '',
          region: '',
          type: ''
        },
        formLabelWidth: '120px',
        info:{
           
           id: "",
           username: " ",
           sex: " ",
           avtar: " ",
           telnumber: " ",
           email: null,
           brith: null,
           introduce:""
      },
      info1:{
           
           id:0,
           username:localStorage.getItem("userName"),
           sex: " ",
           telnumber: " ",
           email: null,
           brith: null,
           introduce:""
      },
        }
    },
    watch:
    {
        user_id:{
            handler(newVal){
			this.user_id=this.$store.getters.getuserId
        
		},
		deep: true
        }
    },
    created()
    {
        this.getInformation();
        this.getComment();
        this.getmyComment();
    },
    methods:
    {
          getInformation()
        {
            this.$axios
                        .get(`/api/userinfo?id=${this.user_id}`)
                        .then((res) => {
                        console.log(res.data);
                        this.info=res.data;
                        this.info1=res.data;
                        
                    
                    })
                        .catch((err) => {
                        console.warn(err);
                    });
        },
        getdetail(index)
        {
            // alert(index);
            localStorage.setItem("newsId",index),
                console.log(index);
                this.$router.push(
                {
                  path: `/newsdetail`,
                  query: { id: index }
                })
        },

      handleClose() {
        this.$confirm('检测到未保存的内容，是否在离开页面前保存修改？', '确认信息', {
          distinguishCancelAndClose: true,
          confirmButtonText: '保存',
          cancelButtonText: '放弃修改'
        })
          .then(() => {
            this.$message({
              type: 'info',
              message: '保存修改'
            });
          })
          .catch(action => {
            this.$message({
              type: 'info',
              message: action === 'cancel'
                ? '放弃保存并离开页面'
                : '停留在当前页面'
            })
          });
      },
      setinfo()
        {
            console.log(this.info1);
            // dialogFormVisible = false
            this.$axios({
                method: 'post',//请求方法
                data: this.info1,
                url: '/api/update_info',
            }) .then((res) => {
                        console.log(res);
                          
                    })
                        .catch((err) => {
                        console.warn(err);
                    });
            location.reload();
        },
        getComment()
        {
            this.$axios
                        .get(`/api/commentall?user_id=${this.user_id}`)
                        .then((res) => {
                        console.log(res);
                        this.List2=res.data
                        
                    
                    })
                        .catch((err) => {
                        console.warn(err);
                    });

        },
        getmyComment()
        {
            this.$axios
                        .get(`/api/Mycomment?user_id=${this.user_id}`)
                        .then((res) => {
                        console.log(res);
                        this.List1=res.data
                        
                    
                    })
                        .catch((err) => {
                        console.warn(err);
                    });

        },
        like()
        {
            this.$axios
                        .get(`/api/likeall?user_id=${this.user_id}`)
                        .then((res) => {
                        console.log(res);
                        this.List=res.data
                        
                    
                    })
                        .catch((err) => {
                        console.warn(err);
                    });
        },
        collect()
        {
            this.$axios
                        .get(`/api/collectall?user_id=${this.user_id}`)
                        .then((res) => {
                        console.log(res.data);
                        this.List=res.data
                        
                    
                    })
                        .catch((err) => {
                        console.warn(err);
                    });
        },
        focus()
        {
            this.$axios
                        .get(`/api/focusall?user_id=${this.user_id}`)
                        .then((res) => {
                        console.log(res.data);
                        this.List3=res.data
                        
                    
                    })
                        .catch((err) => {
                        console.warn(err);
                    });
        },
        changefocus(newsp_id)
        {

            this.$axios.get(`/api/changefocus?user_id=${this.user_id}&newsp_id=${newsp_id}`)
            .then((res) => {
                        console.log(res.data);   
                                        
                    })
                        .catch((err) => {
                        console.warn(err);
                    });
                    location.reload()
        },
        re()
        {
            this.$router.push({name:'HomePage'})
        },
        change1()
        {   
            
            this.flag2=this.f
            this.flag3=this.f
            this.flag4=this.f
            this.flag5=this.f
            this.flag1=this.t
            
        },
        change2()
        {
            this.getComment()
            this.getmyComment()
            this.flag2=this.t
            this.flag3=this.f
            this.flag4=this.f
            this.flag5=this.f
            this.flag1=this.f
        },
        change3()
        {
            this.like()
            this.flag2=this.f
            this.flag3=this.t
            this.flag4=this.f
            this.flag5=this.f
            this.flag1=this.f
        },
        change4()
        {
            this.focus()
            this.flag2=this.f
            this.flag3=this.f
            this.flag4=this.t
            this.flag5=this.f
            this.flag1=this.f
        },
        change5()
        {
            this.collect()
            this.flag2=this.f
            this.flag3=this.f
            this.flag4=this.f
            this.flag5=this.t
            this.flag1=this.f
        }
    }
}
</script>
<style>
#mp-top{
    position: relative;
    width: auto;
    height: 80px;
    display: flex;
}
#mp-under{
    width: auto;
    height: 1000px;
    background:url("../assets/imgs/mypage.png");
}
.avatar{
    width: 40px;
    height:40px;
    margin-right: 5px;
    margin-bottom: -10px;
}
.main-contain{
    background-color: aliceblue;
    width: 1200px;
    height: 800px;
    position: absolute;
    left: 20%;
    right: 20%;
    top:20%;
    opacity: 0.9;
    border-radius: 20px;
    border-top-left-radius:100px ;
    display: flex;
}
.contain1{
    height: 780px;
    background-color: rgb(45, 156, 224);
    border-radius: 20px;
    border-top-left-radius:100px ;
    flex: 1;
    margin-left: 10px;
    margin-top: 10px;
}
.contain2{
    /* background-color: rgb(216, 188, 188); */

    margin-right: 35px;
    flex: 3;
}
.contain3{
    /* background-color: rgb(134, 195, 224); */
    flex: 5;
}
.info{
    margin-top: 150px;
    height: 550px;
    background-color: rgba(204, 217, 227, 0.765);
    opacity: 0.9;
    margin-left: 20px;
    border-radius: 15px;
}
.li-item{
    flex: 1;
	height: 150px;
	margin: 0 0 20px 20px;
	
	width: calc((100% - 200px) / 2);
	min-width:calc((100% - 100px) / 2);
	max-width:calc((100% - 200px) / 2);
    border-radius: 10px;
    
}
.li-item1{
    flex: 1;
	height: 150px;
	margin: 0 0 20px 20px;
	width: calc((100% - 200px) / 3);
	min-width:calc((100% - 100px) / 3);
	max-width:calc((100% - 200px) / 3);
    border-radius: 10px;
    
}
.tranferbox{
    flex:8;
    height: auto;
    /* background-color: aquamarine; */
    margin-top: 20px;
    margin-right: 50px;
    margin-bottom: 20px;
    border-radius: 15px;

}
</style>
